import React, { useRef, useEffect } from "react";
import { connect } from "react-redux";
import * as actionTypes from "./store/actionCreator";
import Swiper from "../../components/Slider";
import RecommendList from "../../components/List";
import ScrollContent from "../../components/Scroll";
import { Wrapper } from "./style";

const Recommend = (props) => {
  const { bannerList, recommendList } = props;
  const { getBannerListDispatch, getRecommendListDispatch } = props;
  const ref = useRef();

  useEffect(() => {
    getBannerListDispatch();
    getRecommendListDispatch();
  }, []);

  const bannerListJs = bannerList ? bannerList.toJS().slice(0, 6) : [];
  const recommendListJs = recommendList ? recommendList.toJS() : [];

  console.log(bannerListJs, recommendListJs);
  return (
    <Wrapper className="wrapper">
      <ScrollContent className="content" ref={ref}>
        <div>
          <Swiper bannerList={bannerListJs}></Swiper>
          <RecommendList recommendList={recommendListJs} />
        </div>
      </ScrollContent>
    </Wrapper>
  );
};

// 映射redux中的state中的数据到组件prop中
const mapStateToProps = (state) => {
  // 不要在这里将数据toJS
  // 因为如果在这里toJS，那么组件每次diff的时候，数据都是不一样的，会直接重新渲染整个组件
  return {
    bannerList: state.getIn(["recommend", "bannerList"]),
    recommendList: state.getIn(["recommend", "recommendList"]),
  };
};

// 映射redux中的action到组件的props中
const mapDispatchToProps = (dispatch) => ({
  getBannerListDispatch() {
    dispatch(actionTypes.getBannerList());
  },
  getRecommendListDispatch() {
    dispatch(actionTypes.getRecommendList());
  },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(React.memo(Recommend));
